<template>
  <div class="flex-center tabs-container">
    <div class="tab"  v-for="tab in tabsList" @click="switchTab(tab.id)">
      {{tab.name}}
      <div v-show="curId===tab.id" class="active"></div>
    </div>

  </div>
</template>
<script>
  export default {
    name:'tabs',
    props:{
      tabsList:{
        type:Array,
        default:[]
      },
      curId:{
        type:String,
        default:''
      }
    },
    methods:{
      switchTab(id){
        this.$emit('switchTab',id)
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "~style/varibles.styl"
.tabs-container
  background-color white
  height 1rem
  width 100%
  justify-content space-around
  .tab
    height 100%
    width 100%
    text-align center
    line-height: 1rem
    box-sizing border-box
    color #333
    .active
      border-bottom .04rem solid $textButton
</style>
